
<template>

  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="服务包名称">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="服务包类型">
        <el-select v-model="form.typeId" placeholder="服务包类型">
          <el-option v-for="level in levels" :key="level.id" :label="level.name" :value="level.id"/>
        </el-select>
      </el-form-item >
      <el-form-item label="服务包图片">
        <div v-for="imag in form.images" class="pic" style="float: left; margin-right: 10px">
          <img :src="imag.images"  width="260px">
        </div>

        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url" alt=""
            >
            <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="服务包价格/元">
        <el-input v-model="form.price"/>
      </el-form-item>
      <el-form-item label="服务对象">
        <el-input v-model="form.object"/>
      </el-form-item>
      <el-form-item label="签约周期/年">
        <el-input v-model="form.cycle"/>
      </el-form-item>

      <el-form-item label="续费状况">
          <label>  不可续签</label> <el-switch v-model="form.renew" active-value=1 inactive-value=0 /> <label> 可续签</label>
      </el-form-item>
      <el-form-item label="服务包状态">
        <el-radio-group v-model="form.state" @change="loggg">
          <el-radio label="0" >未审核</el-radio>
          <el-radio label="1" >使用中</el-radio>
          <el-radio label="2" >停用</el-radio>
          <el-radio label="3" >驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.notes" type="textarea"/>
      </el-form-item>
      <el-form-item label="服务项目">
        <el-table :data="items" fit highlight-current-row>
<!--          <el-table-column type="selection" width="55"></el-table-column>-->

          <el-table-column prop="id" label="项目编号" width="100"></el-table-column>
          <el-table-column prop="name" label="项目名称" width="100" ></el-table-column>
          <el-table-column prop="times" label="次数"  width="100"></el-table-column>
          <el-table-column prop="type" label="项目类型" width="100">
            <template slot-scope="scope">
              {{scope.row.type==0?'免费':'付费'}}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="项目原价（元）"  width="150"></el-table-column>
          <el-table-column prop="introduce" label="项目介绍"  width="460"></el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-select v-model="addItemList" multiple placeholder="请选择" value-key="id">
          <el-option v-for="item in allItem" :label="item.name" :value="item.id" :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      itemIds:[],
      items:[],
      levels:[],
      form: {

      },
      addItemList:[],
      allItem:[],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  methods: {
    loggg(){
      //console.log(this.form)
    },
    getLevel(){
      axios.get('http://localhost:8080/package-type').then(r=>{

        this.levels=r.data.data;
      })
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    handleRemove(file) {
      console.log(1111);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    }
  },
   created(){

     axios.get('http://localhost:8080/item').then(r=>{
       this.allItem=r.data.data;
       console.log(this.allItem)
     })
     axios.post('http://localhost:8080/package-item-contact/search/'+1+'/'+100,{other:{package_id:this.$route.params.id}}).then(r=>{
      this.itemIds=r.data.data.data;
       console.log(this.itemIds)
       for(let i=0;i<this.itemIds.length;i++){
         axios.post('http://localhost:8080/item/search/'+1+'/'+100,{other:{id:this.itemIds[i].itemId}}).then(r=>{
           this.items.push(r.data.data.data[0])
           this.addItemList.push(r.data.data.data[0].id)
         })
       }
    })


    axios.post('http://localhost:8080/package/search/'+1+'/'+1,{other:{id:this.$route.params.id}}).then(r=>{
      this.form=r.data.data.data[0];
      this.form.renew+=''
      this.form.state+=''

      axios.get('http://localhost:8080/package-images-contact/'+this.$route.params.id).then(r=>{
        this.form.images=r.data.data;


      })
    })




    this.getLevel();
  },
  mounted() {



    }


}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>


